<template>

<div class="bg-grey pb-40 ">
      <!--面包屑开始-->
    <div class="archive-header pt-10 wow fadeInUp animated">
      <div class="container">
          <h2 class="font-weight-900">分类</h2>
          <div class="breadcrumb">
              <a href="index.html" rel="nofollow">文章</a>
              <span rel="nofollow"></span> 分类
          </div>
          <div class="bt-1 border-color-1 mt-10 mb-20"></div>
      </div>
    </div>
    <!--面包屑结束-->
      <div class="container  wow fadeInUp animated ">
    <el-card shadow="hover"   class="hover-up transition-normal is-always-shadow">
        <!-- echarts开始 -->
        <div class="charts" ref="charts" @click.prevent="triggerConfetti"  style="height: 550px"></div>
        <!-- echarts结束 -->
        <div class="d-flex justify-content-center align-items-center">
        <router-link class="pl-10 pr-10 d-inline-block tags" :to="{ name: 'categoryDetails', params: { categoryId: category.id,categoryName: category.categoryName} }" v-for="(category,index) in categorys" :key="category.id"><li class="list-inline-item" v-if="category.articleCount!=0">#{{category.categoryName}}</li></router-link>
        </div>
    </el-card>
  </div>
</div>

</template>

<script>
import ConfettiGenerator from 'canvas-confetti';
export default {
  name: "category",
  data() {
    return {
      myChart: null,
      confetti:null,
      categorys:[],
      archives:[],
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.charts);
    this.getCategorys();
    // 监听窗口大小变化事件
    window.addEventListener("resize", () => {
      // 重新设置图表大小
      this.myChart.resize();
    });
  
  },
  methods: {
        //触发纸屑
    triggerConfetti(evnet) {
      const x = event.clientX / window.innerWidth;  // 获取鼠标点击位置的水平坐标
      const y = event.clientY / window.innerHeight; // 获取鼠标点击位置的垂直坐标
      ConfettiGenerator({
      particleCount: 100, // 纸屑数量
      spread: 50,         // 纸屑扩散范围
      colors: ['#FF5733', '#33FF57', '#5733FF'], // 纸屑颜色
      origin: {
          x, // 使用鼠标点击位置的水平坐标
          y, // 使用鼠标点击位置的垂直坐标
        },
      })
  },
    initCharts() {
      this.myChart.setOption({
        title: { text: "文章分类统计图🎉", left: "center" },
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "文章分类数据统计",
            type: "pie",
            radius: [30, 130],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data:this.archives,
            // [
            //   { value: 3, name: "系列 1" },
            //   { value: 0, name: "系列 2" },
            //   { value: 0, name: "系列 3" },
            //   { value: 30, name: "rose 4" },
            //   { value: 28, name: "rose 5" },
            //   { value: 26, name: "rose 6" },
            //   { value: 22, name: "rose 7" },
            //   { value: 18, name: "rose 8" },
            // ],
          },
        ],
      });
    },
    async getCategorys(){
      const res = await this.$API.category.getCategoryList();
      if(res.code == 200)
      {
      this.categorys = res.data;
      const transformedData = res.data
      .filter(item => item.articleCount !== 0)
      .map(item => ({
        value: item.articleCount,
        name: `${item.categoryName} ${item.articleCount}篇`
      }));
      this.archives = transformedData;
       // 初始化图表放在这里
      this.initCharts();
      }else{
        this.$message({
          type:'error',
          message:'获取分类列表失败！'
        })
      }
    }

  },
};
</script>

<style>
.charts {
  width: 100%;
  height: 100%;
}
</style>